// components/swiper.js
const styleDefault = {
    width: "710rpx",
    height: "266rpx",
    onOff: false,
    //是否使用自定义指示点，false不使用
    type: 1,
    //只是点类型
    mainColor: "#000000",
    //主色
    subColor: "rgba(0, 0, 0, .3)",
    //辅助色
    autoplay: true,
    //是否自动播放
    duration: 500,
    //动画时间
    interval: 3e3,
    //动画间隔
    circular: true,
    //是否使用衔接滚动
    previous_margin: "0rpx",
    //前边距
    next_margin: "0rpx",
    //后边距
    display_multiple_items: 1
};

//默认样式
Component({
    externalClasses: [ "m-class" ],
    /**
   * 组件的属性列表
   */
    properties: {
        swiperData: {
            type: Object
        },
        styleSelf: {
            type: Object,
            observer(newVal) {
                var styleData = this.data.styleData;
                this.setData({
                    styleData: {
                        ...styleData,
                        ...newVal
                    }
                });
            }
        },
        color_main: {
            type: String
        }
    },
    /**
   * 组件的初始数据
   */
    data: {
        styleData: {
            ...styleDefault
        },
        current: 0,
        // swiper初始对应的swiper-item
        currentIndex: 0
    },
    /**
   * 组件的方法列表
   */
    methods: {
        swiperChange(e) {
            this.setData({
                currentIndex: e.detail.current
            });
        },
        goToPages(e) {
            var myEventDetail = {
                // detail对象，提供给事件监听函数  //监听函数可以通过e.detail查看传递的数据;　　　
                url: e.currentTarget.dataset.pageurl,
                itemData: e.currentTarget.dataset.itemdata
            };
            var myEventOption = {};
            // 触发事件的选项
                        this.triggerEvent("myevent", myEventDetail, myEventOption);
        }
    },
    /**
   * 组件的生命周期
   */
    lifetimes: {
        show() {},
        attached: function() {
            // 在组件实例进入页面节点树时执行
            var styleData = this.data.styleData;
            var styleSelf = this.properties.styleSelf;
            this.setData({
                styleData: {
                    ...styleData,
                    //原样式
                    ...styleSelf
                },
                current: this.data.current
            });
        },
        detached: function() {
            // 在组件实例被从页面节点树移除时执行
        }
    }
});